<template>
    <div class="biyao-category mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="menu mui-scroll">
            <a class="item" :class="{ checked: activeCategory == null }" @tap="openPage()">推荐</a>
            <a v-for="category in list" class="item" :class="{ checked: activeCategory == category.id }" @tap="openPage( category.id )">{{ category.name }}</a>
        </div>
    </div>
</template>
<script>
import _ from 'lodash';
import { ajax, openPage, locationParams } from 'assets/js/Lib';

export default {
    data() {
        return {
            activeCategory: locationParams( 'category' )
        };
    },
    props: {
        list: {
            type: Array,
            default: []
        }
    },
    mounted() {
        mui( '.biyao-category' ).scroll({
          scrollY: false, //是否竖向滚动
          scrollX: true, //是否横向滚动
          startX: 0, //初始化时滚动至x
          startY: 0, //初始化时滚动至y
          indicators: false, //是否显示滚动条
          deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
          bounce: true //是否启用回弹
        });
    },
    methods: {
        openPage: function( categoryID ) {
            if ( categoryID ) {
                let category = _.find( this.list, item => item.id == categoryID );
                let subCategoryID = _.size( category.sub ) && category.sub[ 0 ] && category.sub[ 0 ].id;
                openPage( `/views/scorelist.html?category=${ categoryID }&sub-category=${ subCategoryID }` );
            } else {
                openPage( '/views/scorehome.html' );
            }
        }
    }
};
</script>
<style lang="less">
    .biyao-category {
        white-space: nowrap;
        height: 1.1rem !important;
        .menu { padding: 0 .4rem; }
        .item {
            position: relative;
            height: 1.1rem;
            line-height: 1.1rem;
            font-size: .4rem;
            color: gray;
            display: inline-block;
            padding: 0 .3rem;
            &.checked {
                color: #7f4395;
                &:after {
                    content: "";
                    position: absolute;
                    right: 0;
                    left: 0;
                    z-index: 10;
                    height: 2px;
                    bottom: 0px;
                    background: #7f4395;
                }
            }
        }
    }
</style>
